<template>
	<div class="classify">
		<p class="title">我的相册</p>
		<div class="wrapper">
			<div v-for="i in 40"  class="item">
				<router-link to="/PhotoAlbum/live" v-lazy:background-image="$store.getters.getImgURL(200,200,i)">
					<div class="content">
						<p>生活日常</p>
					</div>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "classify"
	}
</script>

<style scoped>

	@media screen and (max-width: 992px) {
		.wrapper {
			grid-template-columns: 1fr 1fr 1fr;
			grid-column-gap: .5rem;
			grid-row-gap: 1rem;
		}
		.content {
			height: 40%;
			width: 100%;
		}
	}
	@media screen and (min-width: 993px) {
		.wrapper {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-column-gap: .3rem;
			grid-row-gap: .6rem;
		}
		.content {
			transition: all .3s linear;
			height: 20%;
			width: 80%;
		}
		.item:hover {
			box-shadow:  0 0 .3rem #1e90ff;
		}
		.item:hover .content {
			bottom: 50%;
		}
		.item:hover .content:before {
			background-color: #D7FFF0;
			filter: blur(.5px);
		}
		.item:hover .content p {
			color: #000000;
			font-size: .15rem;
		}
	}
	.title {
		text-align: center;
		font-size: .5rem;
		margin: .3rem 0 .4rem;
		padding: .1rem 0;
		border-radius: 0 50%;
		letter-spacing: .2rem;
		background: linear-gradient(to left, #1FA2FF, #12D8FA, #A6FFCB);
	}
	.wrapper {
		display: grid;
	}
	.item {
		position: relative;
		padding-bottom: 100%;
		border-radius: .1rem;
		box-sizing: border-box;
		user-select: none;
		overflow: hidden;
	}
	a {
		position: absolute;
		width: 100%;
		height: 100%;
		background-size: cover;
		border-radius: .1rem;
		z-index: 1;
		text-decoration: none;
		color: #2f3542;

	}
	a[lazy="loading"] ,a[lazy="error"] {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	a[lazy="loading"]>.content ,a[lazy="error"]>.content {
		display: none;
	}
	a[lazy="loading"] {
		height: 1rem;
		width: 1rem;
	}
	a[lazy="error"] {
		height: 80%;
		width: 80%;
	}
	.content {
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		opacity: .5;
		z-index: 10;
	}
	.content:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: .1rem;
		background-color: #F3F3F3;
		filter: blur(1px);
	}
	.content p{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-size: .1rem;
		font-weight: bolder;
	}
</style>
